import React, { useState } from 'react'
import { addpope } from '../../store/UserList'
import { useSelector, useDispatch } from 'react-redux'
import { List } from 'antd-mobile'
import { ContentOutline, DeleteOutline } from 'antd-mobile-icons'
import { Modal, Input, Form, Button } from 'antd-mobile'
function Detail() {
  const { userpope } = useSelector(state => state.UserList)
  const dispatch = useDispatch()
  const [form] = Form.useForm()
  const [visible, setVisible] = useState(false)
  const addlist = () => {
    setVisible(true)
    form.setFieldsValue()
  }
  const onFinish = () => {
    const addobj = {...form.getFieldsValue()}
    dispatch(addpope(addobj))
    setVisible(false)
    form.setFieldsValue()
  }
  return (
    <div>
      <button onClick={() => addlist()}>新增乘车人</button>
      <List header='乘车人'>
        {
          userpope.map((item, index) => {
            return <List.Item key={index}
              prefix={<ContentOutline />}
              extra={<DeleteOutline />}
              description={item.code}
              
            >
              {item.name}
              {item.phoone}
            </List.Item>
          })
        }
      </List>
      <Modal
        visible={visible}
        content={
          <Form
            layout='horizontal'
            form={form}
            onFinish={onFinish}
            footer={
              <Button block type='submit' color='primary' size='large'>
                提交
              </Button>
            }
          >
            <Form.Header>新增</Form.Header>
            <Form.Item
              name='name'
              label='姓名'
              rules={[{ required: true, message: '姓名不能为空' }]}
            >
              <Input placeholder='请输入姓名' />
            </Form.Item>
            <Form.Item
              name='code'
              label='身份证'
              rules={[{ required: true, message: '身份证不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入身份证' />
            </Form.Item>
            <Form.Item
              name='phoone'
              label='手机号'
              rules={[{ required: true, message: '手机号不能为空' }]}
            >
              <Input onChange={console.log} placeholder='请输入手机号' />
            </Form.Item>
          </Form>
        }
        closeOnAction
        onClose={() => {
          setVisible(false)
        }}
        actions={[
          {
            key: 'confirm',
            text: '我知道了',
          },
        ]}
      />
    </div>
  )
}

export default Detail
